<template>
  <div id="orderbuycar">
    <div class="buycarview">
      <div class="boitem" v-for="(iitem, index) in productinfolist" :key="index">
        <check-icon class="checkicon" :value.sync="iitem.ischeck" @click.native="checkSelf(index)"></check-icon>
        <div class="boleft">
          <img :src="iitem.img" alt="">
        </div>
        <div class="boright">
          <div class="borl"><p class="botitle">{{iitem.title}}</p><p class="boweight">规格：{{iitem.weight}}</p></div>
          <div class="borr"><p class="boprice">{{iitem.price}}积分</p><p class="bonums">&Chi;{{iitem.num}}</p></div>
        </div>
        <div class="editbar">
          <div class="ponumber"><span class="ponumleft" @click="lessStock(index)">-</span><input name="poinputnums" type="number" :value="iitem.num"><span class="ponumright" @click="addStock(index)">+</span></div>
          <div class="podelete" @click="delBuyCar(index)"><i class="fa fa-trash-o" aria-hidden="true"></i></div>
        </div>
      </div>
    </div>
    <div class="noproduct" v-if="productinfolist.length < 1">
      收藏夹空空，快去<a href="javascript:;" @click="routeto('mall')"> 积分商城 </a>看看吧！
    </div>
    <div class="bototal">
      <div class="selectall">
        <check-icon :value.sync="ischeckall" @click.native="checkAll">全选</check-icon>
      </div>
      合计：<span>{{totalprice}}积分</span>　
      <span class="tocount" @click="toCount()">去结算</span>
    </div>
    <div v-if="productinfolist.length > 0" class="moreproduct" @click="addBuy()">添加更多商品</div>
    <toast v-model="showtoast">订单生成...</toast>
    <toast v-model="warntoast" type="cancel">{{warntoasttext}}</toast>
    <confirm v-model="showconfirm"
      :content="confirmtxt"
      confirm-text="确认"
      :close-on-confirm="false"
      @on-cancel="cancelConfirm"
      @on-confirm="okConfirm()">
    </confirm>
  </div>
</template>

<script>
  import { Toast, CheckIcon, Confirm } from 'vux'
  export default{
    name: 'orderbuycar',
    components: {
      Toast,
      CheckIcon,
      Confirm
    },
    data () {
      return {
        showtoast: false,
        showconfirm: false,
        warntoast: false,
        ischeckall: true,
        warntoasttext: '',
        productinfolist: [],
        totalprice: 0,
        confirmtxt: '',
        proindex: ''
      }
    },
    created () {
      let oldbuycarstr = JSON.parse(this.getCookie('buycarlist'))
      console.log(oldbuycarstr)
      oldbuycarstr = oldbuycarstr === null ? [] : oldbuycarstr
      oldbuycarstr.forEach((item) => {
        // 单个商品结算
        this.$axios.post(this.apidomain + '/api/integralMall/queryProductInfoDetail/' + this.getCookie('appid'), {
          openId: this.getCookie('openid'),
          id: item[0].id
        })
        .then((response) => {
          response.data.data.num = item[0].num
          response.data.data.ischeck = true
          this.totalprice += item[0].num * response.data.data.price
          response.data.data.weight = item[0].weight
          this.productinfolist.push(response.data.data)
        })
      })
      setTimeout(() => {
        if (this.productinfolist.length < 1) {
          this.warntoasttext = '暂无商品'
          this.warntoast = true
        }
      }, 1000)
    },
    methods: {
      cancelConfirm: function () {
        this.showconfirm = false
      },
      okConfirm: function () {
        this.productinfolist.splice(this.proindex, 1)
        let oldbuycarstr = JSON.parse(this.getCookie('buycarlist'))
        oldbuycarstr = oldbuycarstr === null ? [] : oldbuycarstr
        oldbuycarstr.splice(this.proindex, 1)
        this.setCookie('buycarlist', JSON.stringify(oldbuycarstr))
        this.checkTotalPrice()
        this.showconfirm = false
      },
      addBuy: function () {
        this.routeto('mall')
      },
      checkSelf: function (index) {
        this.checkTotalPrice()
      },
      checkAll () {
        if (!this.ischeckall) {
          this.productinfolist.forEach((item) => {
            item.ischeck = false
          })
        } else {
          this.productinfolist.forEach((item) => {
            item.ischeck = true
          })
        }
        this.checkTotalPrice()
      },
      addStock: function (index) {
        this.productinfolist[index].num ++
        this.checkTotalPrice()
      },
      lessStock: function (index) {
        this.productinfolist[index].num > 0 ? this.productinfolist[index].num -- : this.productinfolist[index].num
        this.checkTotalPrice()
      },
      delBuyCar: function (index) {
        this.showconfirm = true
        this.confirmtxt = '确认删除该商品吗'
        this.proindex = index
      },
      checkTotalPrice: function () {
        this.totalprice = 0
        this.productinfolist.forEach((item) => {
          if (item.ischeck) {
            this.totalprice += item.num * item.price
          }
        })
      },
      toCount: function () {
        console.log(this.productinfolist)
        if (this.productinfolist.length < 1) {
          this.warntoasttext = '暂无商品'
          this.warntoast = true
        } else {
          this.showtoast = true
          // 重构要提交的收藏夹
          let buycarsubmit = []
          this.productinfolist.forEach((item) => {
            if (item.ischeck && (item.num > 0)) {
              let oncearr = [
                {
                  'id': item.id,
                  'num': item.num,
                  'weight': item.weight
                }
              ]
              buycarsubmit.push(oncearr)
            }
          })
          // 生成新的提交的收藏夹列表
          this.setCookie('buycarsubmit', JSON.stringify(buycarsubmit))
          if (JSON.parse(this.getCookie('buycarsubmit')).length > 0) {
            this.routeto('orderinner')
          } else {
            this.showtoast = false
            this.warntoasttext = '未选择商品'
            this.warntoast = true
          }
        }
      }
    }
  }
</script>
<style lang="less">
@import '../assets/less/order/orderbuycar.less';
</style>
